
<template>
  <div>
    <div class="title-box">
      <div class="item">
        <img src="@/assets/img/icon-dd1@1x.png"/>
        <div>
          <div>订单总数</div>
          <div class="number">620<span class="unit">单</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/img/icon-dd2@1x.png"/>
        <div>
          <div>销售总量</div>
          <div class="number">1280<span class="unit">单</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/img/icon-dd3@1x.png"/>
        <div>
          <div>总销售额</div>
          <div class="number">3591<span class="unit">万元</span></div>
        </div>
      </div>
    </div>
    <div ref="charts" class="charts"></div>

  </div>
</template>
<script>
export default {
  name: 'BottomLeft',
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      // console.log('da',dataValue);
      const trafficWay = [
        {
          name: '美妆',
          value: 10
        },
        {
          name: '百货',
          value: 39
        },
        {
          name: '女装',
          value: 17
        },
        {
          name: '电器',
          value: 17
        },
        {
          name: '运动',
          value: 17
        }
      ]
      // let trafficWay = dataValue;
      const sum = trafficWay.reduce((cur, pre) => {
        return cur + pre.value
      }, 0)

      const data = []
      const legendData = []
      const legendDataValue = []
      const color = [
        'rgba(176, 78, 242, 1)',
        'rgba(13, 118, 255, 1)',
        'rgba(46, 201, 239, 1)',
        'rgba(52, 255, 245, 1)',
        'rgba(124, 212, 89, 1)'
      ]

      for (let i = 0; i < trafficWay.length; i++) {
        // console.log('i', trafficWay);
        // console.log('j', trafficWay[i]);
        const name = trafficWay[i].name
        legendDataValue.push(trafficWay[i].value)
        legendData.push(name)
        data.push(
          {
            value: trafficWay[i].value,
            name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 3,
              // shadowBlur: 10,
              // borderColor: color[i],
              // shadowColor: color[i],
              color: color[i]
            },
            label: {
              show: true,
              position: 'outside', // 标签显示在外部
              formatter: function (params) {
                return `${params.name}` // 使用换行符
              },
              lineHeight: 20, // 调整行高以增加间距
              color: '#868d9b',
              fontSize: 14
              //  padding: [214, 0], // 上下内边距为10，左右内边距为0
            },
            labelLine: {
              show: true,
              length: 5, // 指示线长度
              length2: 20, // 指示线第二段长度
              smooth: true // 使指示线平滑
            }
          },
          {
            value: sum / 100, // 控制每个环形之间的间隙
            name: '',
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        )
      }
      // console.log('data',data);
      const seriesOption = [
        {
          name: '',
          type: 'pie',
          clockwise: false,
          radius: ['40%', '60%'],
          center: ['40%', '55%'],
          emphasis: {
            scale: false
          },
          label: {
            show: false
          },
          data
        }
      ]

      const option = {
        //  backgroundColor: '#021425',
        title: {
          text: name,
          textStyle: {
            color: 'black',
            fontSize: 18,
            padding: [0, 0, 25, 0]
          },

          // x: '40%',
          y: '55%',
          x: '35%' // 设置为居中
          // y: 'center',  // 设置为居中
        },
        color,
        tooltip: {
          show: true
        },
        legend: {
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 5,
          itemStyle: {
            borderWidth: 3
          },
          // orient: 'vertical',
          orient: 'vertical', // 修改为水平排列
          data: legendData,
          bottom: '10%', // 将图例放置在底部
          // left: 'left',
          right: '15%', // 水平居中
          textStyle: {
            color: '#868d9b',
            fontSize: 14,
            padding: [0, 0, 0, 0]
          },
          itemGap: 20 // 图例之间的间隔
        },

        toolbox: {
          show: false
        },
        series: seriesOption
      }

      const myChart = this.$echarts.init(this.$refs.charts)
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
margin-top: 0.521vw;
  padding:0 1.042vw;

  .item{
    display: flex;
    align-items: center;

    .number{
        display: flex;
      font-weight: 600;
      font-size: 1.146vw;

      .unit{
        margin-top: 0.469vw;
        margin-left: 0.26vw;
        color:#89919c;
        font-size: 0.677vw;
      }
    }

    img{
      width: 2.344vw;
      height: 2.344vw;
      margin-right: 0.521vw;
    }
  }
}

.charts{
  width: 32.813vw;
  height: 10.417vw;
}
</style>
